{% extends "base.html" %}

{% block title %}按实例统计{% endblock %}

{% block head %}
  {{ super() }}
  <!-- DataTables -->
  <link rel="stylesheet" href="/static/css/dataTables.bootstrap.min.css">
  <!-- DataTables button -->

  <link rel="stylesheet" href="/static/css/buttons.bootstrap.min.css">
  <!-- DataTables searchPanes -->
  <link rel="stylesheet" href="/static/css/searchPanes.bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/select.bootstrap.min.css">

  <!-- daterange picker -->
  <link rel="stylesheet" href="/static/css/daterangepicker.css">

{% endblock %}

{% block content %}
  <!-- 页面头 -->
  <section class="content-header">
    <!--头部标题-->
    <h1>
      按实例统计
      <!--    <small>advanced tables</small>-->
    </h1>
    <!--面包屑-->
    <ol class="breadcrumb">
      <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
      <li>云运营报表</li>
      <li class="active">按实例统计</li>
    </ol>
  </section>


  <!-- 页面内容 -->
  <section class="content">
    <div class="row">
      <!--    顶部工具栏-->
      <div class="col-md-12">
        <form class="form-inline" id="search-form">
          <!-- Date range -->
          <div class="form-group">
            <label>查询日期范围：</label>
            <div class="input-group">
              <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
              <input type="text" class="form-control" id="daterange" style="width: 190px">
            </div>
            <!-- /.input group -->
          </div>
          <!-- /.form group -->
          &nbsp;&nbsp;
          <button type="submit" class="btn btn-success">查询</button>
        </form>
      </div>

      <br/><br/>

      <div class="col-xs-12">
        <div class="nav-tabs-custom">

          <!--    Tab 页 导航 -->
          <ul class="nav nav-tabs">
            <li class="active"><a href="#tab-ecs" data-toggle="tab">ECS</a></li>
            <li><a href="#tab-rds" data-toggle="tab">RDS</a></li>
            <li><a href="#tab-oss" data-toggle="tab">OSS</a></li>
            <li><a href="#tab-eip" data-toggle="tab">EIP</a></li>
            <li><a href="#tab-odps" data-toggle="tab">ODPS</a></li>
          </ul>

          <div class="tab-content">

            <!-- ECS Tab 页 -->
            <div class="tab-pane active" id="tab-ecs">
              <div class="table-responsive">
                <table id="table_ecs" class="table-hover table-bordered table-condensed table-striped" style="width:100%;font-size: 90%">
                  <thead>
                  <tr>
                    <th>组织</th>
                    <th>项目</th>
                    <th>实例ID</th>
                    <th>CPU(核)</th>
                    <th>内存(MB)</th>
                    <th>CPU最大使用率%</th>
                    <th>CPU最小使用率%</th>
                    <th>CPU平均使用率%</th>
                    <th>内存最大使用率%</th>
                    <th>内存最小使用率%</th>
                    <th>内存平均使用率%</th>
                    <th>CPU最大使用量(核)</th>
                    <th>CPU最小使用量(核)</th>
                    <th>CPU平均使用量(核)</th>
                    <th>内存最大使用量(MB)</th>
                    <th>内存最小使用量(MB)</th>
                    <th>内存平均使用量(MB)</th>
                    <th>磁盘总量(GB)</th>
                    <th>磁盘使用率%</th>
                  </tr>
                  </thead>
                  <tbody><!-- 表格内容，由Datatables根据api返回自动生成 --></tbody>
                </table>
              </div>
            </div>

            <!-- RDS Tab 页 -->
            <div class="tab-pane" id="tab-rds">
              <div class="table-responsive">
                <table id="table_rds" class="table-hover table-bordered table-condensed table-striped" style="width:100%;font-size: 90%">
                  <thead>
                  <tr>
                    <th>组织</th>
                    <th>项目</th>
                    <th>实例ID</th>
                    <th>CPU(核)</th>
                    <th>内存(GB)</th>
                    <th>最大连接数</th>
                    <th>CPU最大使用率%</th>
                    <th>CPU最小使用率%</th>
                    <th>CPU平均使用率%</th>
                    <th>内存最大使用率%</th>
                    <th>内存最小使用率%</th>
                    <th>内存平均使用率%</th>
                    <th>连接数最大使用率%</th>
                    <th>连接数最小使用率%</th>
                    <th>连接数平均使用率%</th>
                    <th>磁盘最大使用率%</th>
                  </tr>
                  </thead>
                  <tbody><!-- 表格内容，由Datatables根据api返回自动生成 --></tbody>
                </table>
              </div>
            </div>

            <!-- OSS Tab 页 -->
            <div class="tab-pane" id="tab-oss">
              <div class="table-responsive">
                <table id="table_oss" class="table-hover table-bordered table-condensed table-striped" style="width:100%;font-size: 90%">
                  <thead>
                  <tr>
                    <th>组织</th>
                    <th>项目</th>
                    <th>Bucket名称</th>
                    <th>存储配额(GB)</th>
                    <th>存储使用率%</th>
                  </tr>
                  </thead>
                  <tbody><!-- 表格内容，由Datatables根据api返回自动生成 --></tbody>
                </table>
              </div>
            </div>

            <!-- EIP Tab 页 -->
            <div class="tab-pane" id="tab-eip">
              <div class="table-responsive">
                <table id="table_eip" class="table-hover table-bordered table-condensed table-striped" style="width:100%;font-size: 90%">
                  <thead>
                  <tr>
                    <th>组织</th>
                    <th>项目</th>
                    <th>实例ID</th>
                    <th>公网IP</th>
                    <th>带宽最大使用率%</th>
                    <th>带宽最小使用率%</th>
                    <th>带宽平均使用率%</th>
                    <th>带宽(Mbps)</th>
                  </tr>
                  </thead>
                  <tbody><!-- 表格内容，由Datatables根据api返回自动生成 --></tbody>
                </table>
              </div>
            </div>

            <!-- ODPS Tab 页 -->
            <div class="tab-pane" id="tab-odps">
              <div class="table-responsive">
                <table id="table_odps" class="table-hover table-bordered table-condensed table-striped" style="width:100%;font-size: 90%">
                  <thead>
                  <tr>
                    <th>组织</th>
                    <th>项目</th>
                    <th>ODPS project</th>
                    <th>CPU消耗(核*小时)</th>
                    <th>内存消耗(GB*小时)</th>
                    <th>合计任务数</th>
                    <th>存储使用量(GB)</th>
                    <th>存储配额(GB)</th>
                    <th>存储使用率%</th>
                  </tr>
                  </thead>
                  <tbody><!-- 表格内容，由Datatables根据api返回自动生成 --></tbody>
                </table>
              </div>
            </div>

          </div>


        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </div>
  </section>
  <!-- /.页面内容 -->



{% endblock %}


{% block script %}



  <!-- DataTables -->
  <script src="/static/js/jquery.dataTables.min.js"></script>
  <script src="/static/js/dataTables.bootstrap.min.js"></script>
  <!-- DataTables buttons-->
  <script src="/static/js/dataTables.buttons.min.js"></script>
  <script src="/static/js/buttons.bootstrap.min.js"></script>

  <script src="/static/js/jszip.min.js"></script>
  <script src="/static/js/pdfmake.min.js"></script>
  <script src="/static/js/vfs_fonts.js"></script>

  <script src="/static/js/buttons.html5.min.js"></script>
  <script src="/static/js/buttons.print.min.js"></script>
  <script src="/static/js/buttons.colVis.min.js"></script>


  <!-- date-range-picker -->
  <script src="/static/js/moment.min.js"></script>
  <script src="/static/js/daterangepicker.js"></script>


  <!-- bootstrap datepicker -->
  {#  <script src="/static/js/bootstrap-datepicker.min.js"></script>#}

  <!-- Page specific script -->
  <script>
      $(document).ready(function () {
          var startDate;
          var endDate;
          //Date range picker
          $('#daterange').daterangepicker({
              startDate: moment().startOf('month'),
              endDate: moment().endOf('month'),
              ranges: {
                  '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                  '上周': [moment().subtract(6, 'days'), moment()],
                  '前30天': [moment().subtract(29, 'days'), moment()],
                  '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                  '本月': [moment().startOf('month'), moment().endOf('month')],
              },
          }, function (start, end, label) {
              console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
          });


          var data = []  // 如果希望表格初始内容为空，可以用空数组赋值
          // 初始查询时间为本月初-本月末
          var init_start = moment().startOf('month').format('YYYY-MM-DD')
          var init_end = moment().endOf('month').format('YYYY-MM-DD')


          // 初始化ecs表格
          var table_ecs = $('#table_ecs').DataTable({
              language: {"url": "/static/language.json"},
              //data: data,
              ajax: '/api/v1/cloud/ecs_instance_stats?start=' + init_start + '&end=' + init_end,
              columns: [
                  {data: 'org'}, {data: 'project'}, {data: 'instance_id'}, {data: 'cpu'}, {data: 'memory'},
                  {data: 'cpu_max_usage'}, {data: 'cpu_min_usage'}, {data: 'cpu_avg_usage'},
                  {data: 'mem_max_usage'}, {data: 'mem_min_usage'}, {data: 'mem_avg_usage'},
                  {data: 'cpu_max_used'}, {data: 'cpu_min_used'}, {data: 'cpu_avg_used'},
                  {data: 'mem_max_used'}, {data: 'mem_min_used'}, {data: 'mem_avg_used'},
                  {data: 'disk_size_all'}, {data: 'disk_usage_all'}
              ],
              processing: true,
              lengthChange: false,
              buttons: ['pageLength', 'excel'],
              initComplete: function () {
                  table_ecs.buttons().container().appendTo('#table_ecs_wrapper .col-sm-6:eq(0)')
              }
          });

          // 初始化rds表格
          var table_rds = $('#table_rds').DataTable({
              language: {"url": "/static/language.json"},
              //data: data,
              ajax: '/api/v1/cloud/rds_instance_stats?start=' + init_start + '&end=' + init_end,
              columns: [
                  {data: 'org'}, {data: 'project'}, {data: 'instance_id'}, {data: 'cpu'}, {data: 'mem'},
                  {data: 'conn_max'}, {data: 'cpu_max'}, {data: 'cpu_min'}, {data: 'cpu_avg'}, {data: 'mem_max'},
                  {data: 'mem_min'}, {data: 'mem_avg'}, {data: 'con_max'}, {data: 'con_min'}, {data: 'con_avg'},
                  {data: 'disk_max'}
              ],
              processing: true,
              lengthChange: false,
              buttons: ['pageLength', 'excel',],
              initComplete: function () {
                  table_rds.buttons().container().appendTo('#table_rds_wrapper .col-sm-6:eq(0)')
              }
          });

          // 初始化oss表格
          var table_oss = $('#table_oss').DataTable({
              language: {"url": "/static/language.json"},
              //data: data,
              ajax: '/api/v1/cloud/oss_instance_stats?end=' + init_end,
              columns: [
                  {data: 'org'}, {data: 'project'}, {data: 'bucket'}, {data: 'capacity'}, {data: 'used_size'}
              ],
              processing: true,
              lengthChange: false,
              buttons: ['pageLength', 'excel',],
              initComplete: function () {
                  table_oss.buttons().container().appendTo('#table_oss_wrapper .col-sm-6:eq(0)')
              }
          });

          // 初始化eip表格
          var table_eip = $('#table_eip').DataTable({
              language: {"url": "/static/language.json"},
              //data: data,
              ajax: '/api/v1/cloud/eip_instance_stats?start=' + init_start + '&end=' + init_end,
              columns: [
                  {data: 'org'}, {data: 'project'}, {data: 'instance_id'}, {data: 'public_ip'}, {data: 'net_rx_max'},
                  {data: 'net_rx_min'}, {data: 'net_rx_avg'}, {data: 'bandwidth'}
              ],
              processing: true,
              lengthChange: false,
              buttons: ['pageLength', 'excel',],
              initComplete: function () {
                  table_eip.buttons().container().appendTo('#table_eip_wrapper .col-sm-6:eq(0)')
              }
          });

          // 初始化odps表格
          var table_odps = $('#table_odps').DataTable({
              language: {"url": "/static/language.json"},
              //data: data,
              ajax: '/api/v1/cloud/odps_instance_stats?start=' + init_start + '&end=' + init_end,
              columns: [
                  {data: 'org'}, {data: 'project'}, {data: 'odps_project'}, {data: 'cpu_core_hours'},
                  {data: 'mem_gb_hours'}, {data: 'tasks'}, {data: 'storage_used_size_gb'}, {data: 'storage_quota_gb'},
                  {data: 'storage_usage'}
              ],
              processing: true,
              lengthChange: false,
              buttons: ['pageLength', 'excel',],
              initComplete: function () {
                  table_odps.buttons().container().appendTo('#table_odps_wrapper .col-sm-6:eq(0)')
              }
          });


          // 处理时间搜索逻辑
          $('#search-form').on('submit', function (event) {
              // 阻止表单默认提交事件
              event.preventDefault();
              // 获取输入框内的时间范围
              startDate = $('#daterange').data('daterangepicker').startDate.format('YYYY-MM-DD');
              endDate = $('#daterange').data('daterangepicker').endDate.format('YYYY-MM-DD');
              console.log(startDate, endDate)
              // 调取后端接口，并刷新所有表格
              table_ecs.ajax.url('/api/v1/cloud/ecs_instance_stats?start=' + startDate + '&end=' + endDate).load();
              table_rds.ajax.url('/api/v1/cloud/rds_instance_stats?start=' + startDate + '&end=' + endDate).load();
              table_oss.ajax.url('/api/v1/cloud/oss_instance_stats?end=' + endDate).load();
              table_eip.ajax.url('/api/v1/cloud/eip_instance_stats?start=' + startDate + '&end=' + endDate).load();
              table_odps.ajax.url('/api/v1/cloud/odps_instance_stats?start=' + startDate + '&end=' + endDate).load();
          })


      });

  </script>
{% endblock %}